.stay-tuned-page
  width: 100%
  height: 100vh
  display: flex
  background-size: 100%
  justify-content: center
  background-repeat: no-repeat
  background-image: url("../../assets/images/bg.jpg")

  img
    width: 20%

  .menu
    position: fixed
    top: 20px
    width: 200px
    height: 200px
    display: flex
    justify-content: center
    align-items: center

    img
      width: 40%

  .menu li
    position: absolute
    left: 0
    list-style: none
    transform-origin: 100px
    transition: 0.5s
    transform: rotate(0deg) translateX(80px)


    .li-0
      background: red
      transition-delay: calc(0.1s * 0)

    .li-1
      transition-delay: calc(0.1s * 1)

    .li-2
      transition-delay: calc(0.1s * 2)

    .li-3
      transition-delay: calc(0.1s * 3)

    .li-4
      transition-delay: calc(0.1s * 4)

    .li-5
      transition-delay: calc(0.1s * 5)

    .li-6
      transition-delay: calc(0.1s * 6)

    .li-7
      transition-delay: calc(0.1s * 7)


  .menu.active
    .toggle
      transform: rotate(calc(360deg / -8 * 4))
    li:hover
      background: red
    .li-0
      transform: rotate(calc(360deg / 8 * 0))

      span
        text-align: center
        transform: rotate(calc(360deg / -8 * 0))

    .li-1
      transform: rotate(calc(360deg / 8 * 1))

      span
        text-align: center
        transform: rotate(calc(360deg / -8 * 1))

    .li-2
      transform: rotate(calc(360deg / 8 * 2))

      span
        text-align: center
        transform: rotate(calc(360deg / -8 * 2))

    .li-3
      transform: rotate(calc(360deg / 8 * 3))

      span
        text-align: center
        transform: rotate(calc(360deg / -8 * 3))

    .li-4
      transform: rotate(calc(360deg / 8 * 4))

      span
        text-align: center
        transform: rotate(calc(360deg / -8 * 4))

    .li-5
      transform: rotate(calc(360deg / 8 * 5))

      span
        text-align: center
        transform: rotate(calc(360deg / -8 * 5))

    .li-6
      transform: rotate(calc(360deg / 8 * 6))

      span
        text-align: center
        transform: rotate(calc(360deg / -8 * 6))

    .li-7
      transform: rotate(calc(360deg / 8 * 7))

      span
        text-align: center
        transform: rotate(calc(360deg / -8 * 7))

  .menu li
    display: flex
    justify-content: center
    align-items: center
    width: 40px
    height: 40px
    background: #fff
    border-radius: 50%
    box-shadow: 0 3px 4px rgba(0, 0, 0, .15)
    color: #111
    transition: 0.5s

    span:nth-child(0)
      transform: rotate(calc(360deg / -8 * 0))

    span:nth-child(1)
      transform: rotate(calc(360deg / -8 * 1))

    span:nth-child(2)
      transform: rotate(calc(360deg / -8 * 2))

    span:nth-child(3)
      transform: rotate(calc(360deg / -8 * 3))

    span:nth-child(4)
      transform: rotate(calc(360deg / -8 * 4))

    span:nth-child(5)
      transform: rotate(calc(360deg / -8 * 5))

    span:nth-child(6)
      transform: rotate(calc(360deg / -8 * 6))

    span:nth-child(7)
      transform: rotate(calc(360deg / -8 * 7))


  .menu li span:hover
    color: #ff1252


  .toggle
    position: absolute
    width: 60px
    height: 60px
    background: #fff
    display: flex
    justify-content: center
    align-items: center
    z-index: 10000
    border-radius: 50%
    cursor: pointer
    box-shadow: 0 3px 4px rgba(0, 0, 0, .15)
    font-size: 2em
    transition: 1.25s

  .menu.active .toggle
    transform: rotate(0deg)

